<script setup>
import { ref,onMounted,defineExpose } from 'vue'
import uploadBtn from './uploadBtn.vue'
import upload from '@/components/app/uploadMaterial.vue'
import appletModel from './appletModel.vue'
import addGroupModel from './addGroupModel.vue'
import { postGroupinglist,postReplyAdd,postRadarUrlData } from '@/api'
const props = defineProps({
	corpVisible: Boolean,
	default: false,
	corpFrom: Object
})
const appletVisible = ref(false)
const changeAppletVisible = (visible) => {
	appletVisible.value = visible
}
const groupingid=ref({
	grouping_name:"",
	son_grouping:[],
	id:''
})
const getImg=(val)=>{
	console.log(val,indexshow.value,'sdfsdfsdf')
	if(props.corpFrom.welcome_data[indexshow.value].type == 2){
		props.corpFrom.welcome_data[indexshow.value].image_url=val
	}else if(props.corpFrom.welcome_data[indexshow.value].type == 4){
		props.corpFrom.welcome_data[indexshow.value].file_url=val.url
		props.corpFrom.welcome_data[indexshow.value].file_name=val.file_name
	}
	else if(props.corpFrom.welcome_data[indexshow.value].type == 3){
		props.corpFrom.welcome_data[indexshow.value].video_url=val.url
		props.corpFrom.welcome_data[indexshow.value].file_name=val.file_name
	}else if(props.corpFrom.welcome_data[indexshow.value].type == 5){
		console.log('aaaaaaaaaaaaaaaaaaaaa')
		props.corpFrom.welcome_data[indexshow.value].link_image_url=val.url || val
		// props.corpFrom.welcome_data[indexshow.value].file_name=val.file_name
	}
	console.log(val,props.corpFrom.welcome_data[indexshow.value])
	
}
const dialogGroupVisible = ref(false)
const emits = defineEmits(['changeCorpVisible'])
const close = () => {
	console.log(props.corpFrom);
	props.corpFrom.title=''
	props.corpFrom.group=[]
	props.corpFrom.grouping_id=[]
	props.corpFrom.welcome_data=[
		{
			imgName: "",
			imgPath: "",
			path: "",
			type: 1,
			url: "",
			value: ""
		}
	]
	// dialogGroupVisible.value = false
	emits('changeCorpVisible', false)
	
}
const addclose=()=>{
	console.log(props.corpFrom,'tyutyutyutyu')
	postReplyAdd(props.corpFrom).then(res=>{
		ElMessage({
			message: res.msg,
			type: 'success',
		})
		props.corpFrom.title=''
		props.corpFrom.group=[]
		props.corpFrom.grouping_id=[]
		props.corpFrom.welcome_data=[
			{
				imgName: "",
				imgPath: "",
				path: "",
				type: 1,
				url: "",
				value: ""
			}
		]
		emits('changeCorpVisible', false)
	})
}
const changeGroupVisible = (visible) => {
	dialogGroupVisible.value = visible
}
const ChangeGroup = (val) => {
	console.log(val)
	if (val === 1) {
		props.corpFrom.group = ''
		dialogGroupVisible.value = true
	}
}
const addContent = () => {
	const obj = {
		type: 1,
		value: '',
		path: '',
		imgName: '',
		imgPath: '',
		image_url: ''
	}
	props.corpFrom.welcome_data.push(obj)
}
const delContent = (index) => {
	props.corpFrom.welcome_data.splice(index, 1)
}
const data = ref([])
//获取分组列表数据
const postGroupinglistapi=()=>{
	postGroupinglist().then(res=>{
		data.value=res.data
	})
}

onMounted(()=>{
	postGroupinglistapi()
})
const radioList = ref([
	{
		label: '文字',
		id: 1
	},
	{
		label: '图片',
		id: 2
	},
	{
		label: '链接',
		id: 5
	},
	{
		label: 'PDF',
		id: 4
	},
	{
		label: '视频',
		id: 3
	},
	{
		label: '小程序',
		id: 6
	}
])
const propsdata={
	children:'son_grouping',
	label:'grouping_name',
	value:'id'
}
const indexshow=ref()
const err = (index)=>{
	console.log(index);
	indexshow.value=index
}
const show = (val)=>{
	console.log(val);
	postGroupinglistapi()
}
const postRadarUrlDataapi=(val,index)=>{
	postRadarUrlData({url:val}).then(res=>{
		props.corpFrom.welcome_data[index].link_title=res.data.title
		props.corpFrom.welcome_data[index].link_desc=res.data.desc
		props.corpFrom.welcome_data[index].link_image_url=res.data.url
	})
}
defineExpose({
  show,
})
</script>
<template>
	<el-dialog v-model="props.corpVisible" :center="true" title="新建话术" width="620px" @close="close">
		<div class="model-box">
			<el-scrollbar max-height="500px">
				<div class="input-box">
					<span>分组：</span>
					<el-tree-select 
					 @change="ChangeGroup"
					  :props="propsdata"
					  default-expand-all
					  :current-node-key="[4]"
					    :data="data"
						 style="width: 65%"
						  check-strictly
						   :render-after-expand="false"
						    v-model="props.corpFrom.grouping_id"
							 placeholder="请选择">
						
					</el-tree-select>
				</div>
				<div class="input-box">
					<span>标题：</span>
					<el-input
						style="width: 65%"
						v-model="props.corpFrom.title"
						maxlength="100"
						placeholder="选填，仅内部可见，方便整理和查看"
						show-word-limit
						type="text"
					/>
				</div>

				<div v-for="(item, index) in props.corpFrom.welcome_data" :key="index">
					<div class="input-box select-box">
						<el-radio-group v-model="item.type">
							<el-radio v-for="item in radioList" :key="item.id" :label="item.id">{{ item.label }}</el-radio>
						</el-radio-group>
						<div v-show="props.corpFrom.welcome_data.length > 1" class="del-box" @click="delContent(index)">
							<el-icon><Delete /></el-icon>
						</div>
					</div>
					<!-- 文字选项 -->
					<div class="input-box" v-show="item.type == 1">
						<el-input
							v-model="item.text"
							:rows="2"
							type="textarea"
							maxlength="1300"
							resize="none"
							show-word-limit
							placeholder="请输入话术内容"
							:autosize="{
								minRows: 4,
								maxRows: 5
							}"
						/>
					</div>
					<!-- 图片选项 -->
					<div class="img-box" v-show="item.type == 2">
						<!-- <div class="input-box">
							<span>图片名称：</span>
							<el-input style="width: 45%" v-model="item.imgName" placeholder="图片名称可用于搜索" type="text" />
						</div> -->
						<div class="paste-pic-container">
							<!-- <el-input
								style="padding: 0 5px"
								v-model="item.imgPath"
								:rows="2"
								type="textarea"
								resize="none"
								
								:autosize="{
									minRows: 4,
									maxRows: 5
								}"
							/> -->
							<uploadBtn @click="err(index)" @getImg="getImg" />
						</div>
					</div>
					<!-- 图文选项 -->
					<div class="" v-if="item.type == 5">
						<div style="width:100%" >
							<el-input v-model="item.link_url" style="height: 44px" placeholder="请输入链接" @keyup.enter.native="postRadarUrlDataapi(item.link_url,index)" clearable />
						</div>
						<div style="width:100%">
							<el-input v-model="item.link_title" style="height: 44px" placeholder="请输入链接标题" clearable />
						</div>
						<div style="width:100%">
							<el-input v-model="item.link_desc" style="height: 44px" placeholder="请输入链接描述" clearable />
						</div>
						<div style="width:100%">
							<uploadBtn :imgurl="item.link_image_url" @click="err(index)" @getImg="getImg" />
						</div>
						
					</div>
					<!-- pdf选项 -->
					<div class="pdf-part" v-show="item.type == 4">
						<upload :type="4" @click="err(index)" :text="'添加PDF'" @getImg="getImg" v-if="!item.file_url" />
						<div v-else><el-icon><Document /></el-icon>{{item.file_name}} </div>
						<p v-if="!item.file_url">请在20M以内</p>
					</div>
					<!-- 视频选项 -->
					<div class="pdf-part" v-show="item.type == 3">
						<upload :type="2" @click="err(index)" :text="'上传视频'"  @getImg="getImg" v-if="!item.video_url" />
						<div v-else><el-icon><Document /></el-icon>{{item.file_name}} </div>
						<p v-if="!item.video_url">*文件需在10M以内</p>
					</div>
					<!-- 小程序选项 -->
					<div class="uplaod-box" v-show="item.type == 6">
						<div class="desc-box">
							<div>注意：</div>
							<div>
								<p>1、小程序暂不支持复合话术</p>
								<p>2、mac 端暂不支持发送小程序</p>
							</div>
						</div>
						<div class="upload-import">
							<div class="upload-applet" @click="changeAppletVisible(true)">
								<el-icon>
									<Plus />
								</el-icon>
								<p>上传小程序</p>
							</div>
							<p>*请填写企业微信后台绑定的小程序 id 和路径，否则会造成发送失败</p>
						</div>
					</div>
				</div>

				<div class="input-box">
					<el-button @click="addContent" type="primary" style="margin-right: 5px" plain>添加内容</el-button>
					<span class="input-span">(添加的多个内容可一键发送)</span>
				</div>
				<!-- <p class="kw-title">关键词匹配：</p>
				<div class="desc">
					设置关键词后，当客户发送的消息中有对应的关键词，将在侧边栏快捷回复中智能推荐该话术
					<p class="desc-inner">
						关键词匹配功能需开通会话存档后才能使用，企业没有员工开通此功能，暂时无法使用
						<span class="highlight">去开通</span>
					</p>
				</div> -->
			</el-scrollbar>
		</div>
		<template #footer>
			<div class="dialog-footer">
				<el-checkbox v-model="props.corpFrom.send_type" :true-label="1"  :false-label="0" label="话术更新后，「企微提醒」通知员工" />
				<div>
					<el-button class="btn-cancal" @click="close">取消</el-button>
					<el-button class="btn-cancal" type="primary" @click="addclose"> 添加 </el-button>
				</div>
			</div>
		</template>
		<appletModel :appletVisible="appletVisible" @changeAppletVisible="changeAppletVisible" />
		<addGroupModel :id="groupingid" v-if="dialogGroupVisible" :dialogGroupVisible="dialogGroupVisible" @changeGroupVisible="changeGroupVisible" :width="'100%'" />
	</el-dialog>
</template>
<style lang="scss" scoped>
.folder-icon {
	font-size: 16px;
	color: #1890ff;
	margin-right: 2px;
}
.group-item {
	display: flex;
	align-items: center;
	height: 40px;
	padding: 0px 9px 10px 15px;
	margin-bottom: 10px;
	font-size: 14px;
	color: #000000a6;
}
.add-group {
	display: flex;
	align-items: center;
	color: #000000a6;
	border-bottom: 1px dashed #eaeaea;
}
.btn-cancal {
	width: 74px;
	height: 32px;
}

.model-box {
	width: 100%;
	padding-left: 25px;
	.kw-title {
		font-weight: 700;
		font-size: 14px;
		line-height: 22px;
		text-align: left;
		color: #333;
		margin-bottom: 7px;
	}
	.desc-inner {
		color: rgba(0, 0, 0, 0.45);
		margin-bottom: 0;
	}
	.highlight {
		font-weight: 500;
		font-size: 12px;
		line-height: 21px;
		color: #1890ff;
	}
	.desc {
		background: #f7fbff;
		border: 1px solid #cce9ff;
		box-sizing: border-box;
		border-radius: 2px;
		padding: 6px 0 6px 9px;
		font-size: 12px;
		line-height: 21px;
		color: rgba(0, 0, 0, 0.65);
		margin-bottom: 18px;
	}
	.pdf-part {
		display: flex;
		align-items: flex-end;
		padding: 12px 16px;
		background: #fbfbfb;
		border-radius: 2px;
		border: 1px solid #eee;
		p {
			font-size: 14px;
			color: rgba(0, 0, 0, 0.45);
			margin-left: 12px;
		}
	}
	.uplaod-box {
		margin-bottom: 12px;
		padding: 12px 16px;
		background: #fbfbfb;
		border-radius: 2px;
		border: 1px solid #eee;
		.upload-import {
			display: flex;
			align-items: flex-end;
			padding: 12px 16px;
			.upload-applet {
				display: flex;
				min-width: 120px;
				height: 120px;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				font-size: 28px;
				border-radius: 2px;
				border: 1px dashed #eee;
				cursor: pointer;
				p {
					margin-top: 8px;
					font-size: 13px;
					color: #000000d9;
				}
			}
			.upload-applet:hover {
				color: #1890ff;
				border-color: #1890ff;
			}
			.upload-applet:hover p {
				color: #1890ff;
			}
			p {
				font-size: 14px;
				color: rgba(0, 0, 0, 0.45);
				margin-left: 12px;
			}
		}
	}
	.desc-box {
		display: flex;
		-webkit-box-align: baseline;
		align-items: baseline;
		padding: 12px 19px;
		margin-bottom: 12px;
		background: #f7fcff;
		border-radius: 3px;
		border: 1px solid #acd7ff;
		font-size: 12px;
	}
	.select-box {
		justify-content: space-between;
		:deep(.el-input__wrapper) {
			background-color: #fbfbfb;
		}
	}
	.input-box {
		display: flex;
		align-items: center;
		margin-bottom: 24px;
		:deep(.el-textarea__inner) {
			background-color: #fafafa;
		}

		.input-span {
			color: #999;
		}
	}
	.img-box {
		.paste-pic-container {
			padding-top: 12px;
			padding-bottom: 15px;
			margin-bottom: 12px;
			width: 100%;
			// height: 187px;
			background: #f8f8f8;
			position: relative;
			border: 1px solid #eee;
			border-radius: 2px;
			:deep(.el-textarea__inner) {
				background-color: #f8f8f8;
				box-shadow: none;
			}
		}
	}
	.del-box {
		padding: 3px 5px;
		background: #f0f0f0;
		border-radius: 2px;
		cursor: pointer;
	}
}
.dialog-footer {
	display: flex;
	justify-content: space-between;
	width: 100%;
	padding-left: 25px;
}
</style>
